<!DOCTYPE html>
<html>

<head lang='zh'>
  <meta charset='utf-8'>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="renderer" content="webkit"/>
  <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0"/>
  <title>报表制作</title>

  <link rel='stylesheet' href='./plugins/css/pluginsCss.css'/>
  <link rel='stylesheet' href='./plugins/plugins.css'/>
  <link rel='stylesheet' href='./css/luckysheet.css'/>
  <link rel='stylesheet' href='./assets/iconfont/iconfont.css'/>
  <script src="./plugins/js/plugin.js"></script>

  <!-- rollup luckysheet.js -->
  <script src="./luckysheet.umd.js"></script>

</head>

<body>
<!-- Non-full screen test -->
<!-- <div style="position: relative;width: 100%;height: 100%;">

  <div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:80%;height:500px;left: 20%;top: 200px;bottom:0;right: 0;"></div>
</div> -->

<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>

<script src="./report/feature.js"></script>

<script>

  let templateData = {
    "name": "报表名称",
    "index": "0",
    "zoomRatio": 1,
    "order": "0",
    // "column": 18,
    "row": 36,
    "status": 1
  }

  $(function () {

    // According to the browser language
    var lang = luckysheetUtil.language() === 'zh' ? 'zh' : 'en';
    var options = null;

    {
      options = {
        container: 'luckysheet',
        lang: lang,
        // pager: {
        // 	pageIndex: 1,
        // 	pageSize: 10,
        // 	total: 50,
        // 	selectOption: [10, 20]
        // },
        title: '2022年发电量相关报表模板制作（这里放的是标题）',
        readonlyTitle: true,//只读标题
        hideinfodetailback: true, // 是否隐藏左上角返回按钮
        hideinfodetaillogo: true, // 是否隐藏左上角Logo
        showsheetbar: true,
        showsheetbarConfig: {
          add: false, //新增sheet
          menu: false, //sheet管理菜单
        },
        sheetRightClickConfig: {
          delete: false, // 删除
          copy: false, // 复制
          rename: true, //重命名
          color: true, //更改颜色
          hide: false, //隐藏，取消隐藏
          move: false, //向左移，向右移
        },
        forceCalculation: false,
        plugins: ['chart'],
        fontList: [
          {
            "fontName": "HanaleiFill",
            "url": "./assets/iconfont/HanaleiFill-Regular.ttf"
          },
          {
            "fontName": "Anton",
            "url": "./assets/iconfont/Anton-Regular.ttf"
          },
          {
            "fontName": "Pacifico",
            "url": "./assets/iconfont/Pacifico-Regular.ttf"
          }
        ],
        hook: {
          cellDragStop: function (cell, postion, sheetFile, ctx, event) {
            // console.info(cell, postion, sheetFile, ctx, event);
          },
          rowTitleCellRenderBefore: function (rowNum, postion, ctx) {
            // console.log(rowNum);
          },
          rowTitleCellRenderAfter: function (rowNum, postion, ctx) {
            // console.log(ctx);
          },
          columnTitleCellRenderBefore: function (columnAbc, postion, ctx) {
            // console.log(columnAbc);
          },
          columnTitleCellRenderAfter: function (columnAbc, postion, ctx) {
            // console.log(postion);
          },
          cellRenderBefore: function (cell, postion, sheetFile, ctx) {
            // console.log(cell,postion,sheetFile,ctx);
          },
          cellRenderAfter: function (cell, postion, sheetFile, ctx) {
            // console.log(postion);
          },
          cellMousedownBefore: function (cell, postion, sheetFile, ctx) {
            // console.log(postion);
          },
          cellMousedown: function (cell, postion, sheetFile, ctx) {
            // console.log(sheetFile);
          },
          sheetMousemove: function (cell, postion, sheetFile, moveState, ctx) {
            // console.log(cell,postion,sheetFile,moveState,ctx);
          },
          sheetMouseup: function (cell, postion, sheetFile, moveState, ctx) {
            // console.log(cell,postion,sheetFile,moveState,ctx);
          },
          cellAllRenderBefore: function (data, sheetFile, ctx) {
            // console.info(data,sheetFile,ctx)
          },
          updated: function (operate) {
            // console.info(operate)
          },
          cellUpdateBefore: function (r, c, value, isRefresh) {
            // console.info('cellUpdateBefore',r,c,value,isRefresh)
          },
          cellUpdated: function (r, c, oldValue, newValue, isRefresh) {
            // console.info('cellUpdated',r,c,oldValue, newValue, isRefresh)
          },
          sheetActivate: function (index, isPivotInitial, isNewSheet) {
            // console.info(index, isPivotInitial, isNewSheet)
          },
          rangeSelect: function (index, sheet) {
            // console.info(index, sheet)
          },
          commentInsertBefore: function (r, c) {
            // console.info(r, c)
          },
          commentInsertAfter: function (r, c, cell) {
            // console.info(r, c, cell)
          },
          commentDeleteBefore: function (r, c, cell) {
            // console.info(r, c, cell)
          },
          commentDeleteAfter: function (r, c, cell) {
            // console.info(r, c, cell)
          },
          commentUpdateBefore: function (r, c, value) {
            // console.info(r, c, value)
          },
          commentUpdateAfter: function (r, c, oldCell, newCell) {
            // console.info(r, c, oldCell, newCell)
          },
          cellEditBefore: function (range) {
            // console.info(range)
          },
          workbookCreateAfter: function (json) {
            // console.info(json)
          },
          rangePasteBefore: function (range, data) {
            // console.info('rangePasteBefore',range,data)
            // return false; //Can intercept paste
          },
        },
        data: [templateData]
      }
    }
    options.loading = {
      image: () => {
        return `<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none"></circle>
					</svg>`
      },
      imageClass: "loadingAnimation"
    }
    options.cellRightClickConfig = {
      customs: [{
        title: '获取报表内容',
        onClick: function (clickEvent, event, params) {
          console.log(luckysheet);
        }
      }, {
        title: 'test',
        onClick: function (clickEvent, event, params) {
          console.log('function test click', clickEvent, event, params)
        }
      }]
    }
    luckysheet.create(options);
  })
</script>
<style>
  /* 自定义loading演示样式 */
  @keyframes loading-rotate {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes loading-dash {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }

    50% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -40px;
    }

    100% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -120px;
    }
  }

  .loadingAnimation {
    width: 3em;
    height: 3em;
    animation: loading-rotate 2s linear infinite;
  }

  .loadingAnimation circle {
    animation: loading-dash 1.5s ease-in-out infinite;
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    stroke-width: 2;
    stroke: currentColor;
    stroke-linecap: round;
  }
</style>
</body>

</html>
